<template>
    <div class="targetBar" :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: 'target-bar',
        props: {
            className: {
                type: String,
                default: 'warning'
            },
            width: {
                type: String,
                default: '390px'
            },
            height: {
                type: String,
                default: '380px'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            targetData: {
                type: Array
            }
        },
        data () {
            return {
                chart: null,
                isResize:true,
                chartData: []
            }
        },
        methods: {
            initChart() {
                this.chart = echarts.init(document.getElementsByClassName('targetBar')[0]);
                this.setOptions()
            },
            setOptions({} = {}) {
                this.chart.setOption({
                    legend: {
                        data: ['目标标准总数 ', '已出报告数'],
                        bottom: 25,
                        icon:"circle", // 修改形状
                        itemHeight: 10, // 修改图标大小
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    color: ['#c23531','#2f4554'],
                    grid: {
                        left: '3%',
                        right: '5%',
                        top: '6%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: [' 共享与我 ', ' 我参与', '我负责']
                    },
                    series: [
                        {
                            name: '目标标准总数 ',
                            type: 'bar',
                            itemStyle: {
                                color: '#3AA1FE'
                            },
                            barGap: '10%',
                            barWidth: 26,
                            data: [...this.chartData]

                        },
                        // {
                        //     name: '已出报告数',
                        //     type: 'bar',
                        //     itemStyle: {
                        //         color: '#4FCB73'
                        //     },
                        //     barGap: '10%',
                        //     barWidth: 26,
                        //     data: [60, 23, 12]
                        // }
                    ]
                }, true);
                window.onresize = this.chart.resize;
            }
        },
        watch: {
            targetData:{
                handler(val) {
                    if (val && val.length) {
                        val.forEach(item => {
                            switch (item.role) {
                                case 1:
                                    this.chartData[2] = item.total;
                                    break;
                                case 2:
                                    this.chartData[1] = item.total;
                                    break;
                                case 3:
                                    this.chartData[0] = item.total;
                                    break;
                            }
                        });
                    }
                    this.initChart();
                },
                deep: true
            }
        }
    }
</script>

<style scoped>

</style>
